<!-- 药品消耗总数TOP10 -->
<template>
    <div id="topTenDrug"></div>
</template>
<script>
import * as echarts from "echarts";
import { getTopTenData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {};
    },
    mounted() {
        this.setEcharts();
    },
    methods: {
        //设置echarts
        setEcharts() {
            let topTenDrug = echarts.init(
                document.getElementById("topTenDrug")
            );

            var attackSourcesColor = [
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: "#EB3B5A" },
                    { offset: 1, color: "#FE9C5A" },
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: "#FA8231" },
                    { offset: 1, color: "#FFD14C" },
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: "#F7B731" },
                    { offset: 1, color: "#FFEE96" },
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: "#395CFE" },
                    { offset: 1, color: "#2EC7CF" },
                ]),
            ];
            var attackSourcesColor1 = [
                "#EB3B5A",
                "#FA8231",
                "#F7B731",
                "#3860FC",
                "#1089E7",
                "#F57474",
                "#56D0E3",
                "#1089E7",
                "#F57474",
                "#1089E7",
                "#F57474",
                "#F57474",
            ];
            var attaData = [];
            var attaName = [];
            const data = [{ HOS_NAME: "林可霉素", VALUE1: Mock.Random.integer(7000, 9000) },
            { HOS_NAME: "克林霉素", VALUE1: Mock.Random.integer(6500, 7000) },
            { HOS_NAME: "亚胺培南", VALUE1: Mock.Random.integer(6300, 6500) },
            { HOS_NAME: "头孢噻肟", VALUE1: Mock.Random.integer(6000, 6300) },
            { HOS_NAME: "哌拉西林", VALUE1: Mock.Random.integer(5800, 6000) },
            { HOS_NAME: "阿莫西林", VALUE1: Mock.Random.integer(5000, 5800) },
            { HOS_NAME: "喷托维林", VALUE1: Mock.Random.integer(4700, 5000) },
            { HOS_NAME: "硝苯地平", VALUE1: Mock.Random.integer(4000, 4700) },
            { HOS_NAME: "沙丁胺醇", VALUE1: Mock.Random.integer(3500, 4000) },
            { HOS_NAME: "吲哚美辛", VALUE1: Mock.Random.integer(3000, 3500) },
            ]
            data.forEach((it, index) => {
                attaData[index] = parseInt(it.VALUE1);
                attaName[index] = it.HOS_NAME;
            });
            var salvProMax = []; //背景按最大值
            for (let i = 0; i < attaData.length; i++) {
                salvProMax.push(attaData[0]);
            }
            function attackSourcesDataFmt(sData) {
                var sss = [];
                sData.forEach(function (item, i) {
                    let itemStyle = {
                        color:
                            i > 3
                                ? attackSourcesColor[3]
                                : attackSourcesColor[i],
                    };
                    sss.push({
                        value: item,
                        itemStyle: itemStyle,
                    });
                });
                return sss;
            }

            var option = {
                tooltip: {
                    show: false,
                    backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
                    textStyle: {
                        fontSize: 16,
                    },
                },
                color: ["#F7B731"],
                grid: {
                    left: "1%",
                    right: "1%",
                    width: "80%",
                    bottom: "1%",
                    top: "1%",
                    containLabel: true,
                },
                xAxis: {
                    type: "value",

                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                },
                yAxis: [
                    {
                        type: "category",
                        inverse: true,
                        axisTick: "none",
                        axisLine: "none",
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: "#fff",
                                fontSize: "15",
                            },
                        },
                        data: attackSourcesDataFmt(attaName),
                    },
                    {
                        type: "category",
                        inverse: true,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisPointer: {
                            label: {
                                show: true,
                                //margin: 30
                            },
                        },
                        pdaaing: [5, 0, 0, 0],
                        postion: "right",
                        data: attaName,
                        axisLabel: {
                            margin: 30,
                            fontSize: 16,
                            align: "right",
                            padding: [2, 0, 0, 0],
                            color: "#000",
                            rich: {
                                nt1: {
                                    color: "#fff",
                                    backgroundColor: attackSourcesColor1[0],
                                    width: 16,
                                    height: 16,
                                    fontSize: 14,
                                    align: "center",
                                    borderRadius: 100,
                                    lineHeight: "5",
                                    padding: [0, 1, 2, 1],
                                    // padding:[0,0,2,0],
                                },
                                nt2: {
                                    color: "#fff",
                                    backgroundColor: attackSourcesColor1[1],
                                    width: 16,
                                    height: 16,
                                    fontSize: 14,
                                    align: "center",
                                    borderRadius: 100,
                                    padding: [0, 1, 2, 1],
                                },
                                nt3: {
                                    color: "#fff",
                                    backgroundColor: attackSourcesColor1[2],
                                    width: 16,
                                    height: 16,
                                    fontSize: 14,
                                    align: "center",
                                    borderRadius: 100,
                                    padding: [0, 1, 2, 1],
                                },
                                nt: {
                                    color: "#fff",
                                    backgroundColor: attackSourcesColor1[3],
                                    width: 16,
                                    height: 16,
                                    fontSize: 14,
                                    align: "center",
                                    lineHeight: 3,
                                    borderRadius: 100,
                                    padding: [0, 1, 2, 1],
                                },
                            },
                            formatter: function (value, index) {
                                index = index + 1;
                                if (index - 1 < 3) {
                                    return [
                                        "{nt" + index + "|" + index + "}",
                                    ].join("\n");
                                } else {
                                    return ["{nt|" + index + "}"].join("\n");
                                }
                            },
                        },
                    },
                ],
                series: [
                    {
                        zlevel: 1,
                        type: "bar",
                        barWidth: "15px",
                        animationDuration: 1500,
                        data: attackSourcesDataFmt(attaData),
                        align: "center",
                        itemStyle: {
                            normal: {
                                barBorderRadius: 10,
                            },
                        },
                        label: {
                            show: true,
                            fontSize: 14,
                            color: "#fff",
                            textBorderWidth: 2,
                            padding: [2, 0, 0, 0],
                        },
                    },
                    {
                        type: "bar",
                        barWidth: 15,
                        barGap: "-100%",
                        margin: "20",
                        data: salvProMax,
                        textStyle: {
                            //图例文字的样式
                            fontSize: 14,
                            color: "#fff",
                        },
                        itemStyle: {
                            normal: {
                                color: "#05325F",
                                //width:"100%",
                                fontSize: 16,
                                barBorderRadius: 30,
                            },
                        },
                    },
                ],
            };
            topTenDrug.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#topTenDrug {
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
</style>